<template>
  <div class="layout-good-info">
    <el-form ref="form" :model="goodInfo" :rules="rules" label-position="top" size="small">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="goodInfo.name" auto-complete="off" placeholder="请输入产品名称"></el-input>
      </el-form-item>
      <el-form-item label="所属产品" prop="product">
        <el-select v-model="goodInfo.product" multiple placeholder="请选择产品属性">
          <el-option v-for="item in productList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="品牌" prop="brand">
        <el-select v-model="goodInfo.brand" multiple placeholder="请选择产品属性">
          <el-option v-for="item in brandList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="商品图片" prop="picture">
        <el-upload
          action="#"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :auto-upload="false"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt>
        </el-dialog>
      </el-form-item>
      <el-form-item label="商品简介" prop="introduction">
        <el-input
          v-model="goodInfo.introduction"
          type="textarea"
          :rows="6"
          auto-complete="off"
          placeholder="请输入产品简介"
        ></el-input>
      </el-form-item> -->
    </el-form>
    <div class="operate-button">
      <el-button @click="handleCancel" size="small">取 消</el-button>
      <el-button type="primary" @click="handleNext" size="small">下一步</el-button>
    </div>
    <!-- <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt>
    </el-dialog> -->
  </div>
</template>

<script>
const defaultGood = {};
export default {
  name: "GoodInfo",
  data() {
    return {
      goodInfo: {
        id: "",
        name: "",
        introduction: "",
        picture: [],
        product: "",
        brand: ""
      },
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        introduction: [
          { required: true, message: "请输入商品简介", trigger: "blur" }
        ],
        product: [
          { required: true, message: "请选择所属产品", trigger: "change" }
        ],
        brand: [
          { required: true, message: "请选择产品品牌", trigger: "change" }
        ]
      },
      productList: [],
      brandList: [],
      // dialogVisible: false,
      // dialogImageUrl: ""
    };
  },
  created() {},
  methods: {
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleCancel() {},
    handleNext() {
      this.$emit('good-next')
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.layout-good-info {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 20px;
  .operate-button {
    padding-top: 10px;
    text-align: center;
    .el-button {
      min-width: 100px;
    }
  }
  .el-form {
    .el-select {
      min-width:  480px;
    }
  }
}
</style>
